// 遍历生成0-50范围的margin
.generateMargin(@n, @i: 0) when (@i =< @n) {
  .mr-@{i} {
    margin-right: @i + 0px !important;
  }

  .mt-@{i} {
    margin-top: @i + 0px !important;
  }

  .mb-@{i} {
    margin-bottom: @i + 0px !important;
  }

  .ml-@{i} {
    margin-left: @i + 0px !important;
  }

  .generateMargin(@n, (@i + 1));
}

// 遍历生成10-100%范围的宽和高
.generateWidthHeight(@n, @i: 5) when (@i =< @n) {
  .w-@{i}p {
    width: @i + 0% !important;
  }

  .h-@{i}p {
    height: @i + 0% !important;
  }

  .ml-@{i}p {
    margin-left: @i + 0% !important;
  }

  .generateWidthHeight(@n, (@i + 5));
}
.generateMargin(100);
.generateWidthHeight(100);

.box-ver-start {
  display: flex;
  align-items: flex-start;
}

.box-ver-center {
  display: flex;
  align-items: center;
}

.box-ver-end {
  display: flex;
  align-items: flex-end;
}

.box-ver-hor-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-ver-hor-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.box-ver-hor-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-hor-space {
  display: flex;
  justify-content: space-between;
}

.box-ver-hor-space {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-hor-end {
  display: flex;
  justify-content: flex-end;
}

.box-hor-start {
  display: flex;
  justify-content: flex-start;
}

.box-hor-center {
  display: flex;
  justify-content: center;
}

.fw-bold {
  font-weight: bold;
}

.pr {
  position: relative;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.cursor-pointer {
  cursor: pointer;
}

.display-block {
  display: block;
}

